<template>
	<div class="padding-across-10 main" v-loading="loading" element-loading-text="拼命加载中">
		<div>
			<headerOpreate style="width: 100px;padding-bottom: 2px;float: left;margin-right: 10px;padding-top: 5px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<el-table border style="width: 100%;" :data="tableData">
			<el-table-column label="书名" align="center" prop="Name"></el-table-column>
			<el-table-column label="条码" align="center" prop="BookBarcode"></el-table-column>
			<el-table-column label="类型" align="center" prop="Type"></el-table-column>
			<el-table-column label="馆藏地" align="center" prop="Location"></el-table-column>
			<el-table-column label="上新时间" align="center" prop="BindTime"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag type="danger" v-if="scope.row.Status === 1">丢失</el-tag>
					<el-tag type="warning" v-if="scope.row.Status === 2">外借</el-tag>
					<el-tag type="success" v-if="scope.row.Status === 3">在库</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:50px;padding-top: 3px;padding-bottom: 5px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun,HttpServer } from '../../../assets/js/common.js'
	import headerOpreate from '../../../components/headerOpreate'
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				tableData: [],
				content:'',
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				loading:false,
				opreateDatas: [
					{
						show:true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					}]
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			formateDate(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].BindTime.indexOf("T");
					array[i].BindTime = array[i].BindTime.substring(0, index1) + " " + array[i].BindTime.substring(index1 + 1, index1 + 9);
				}
			},
			handleCurrentChange(val){
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val){
				this.pageSize = val;
				this.getDatas();
			},
			//刷新
			reloadDatas() {
				HttpServer.httpGet.call(this,'/Api/Book/Info/NewBook?index='+this.currentPage+'&pageSize='+this.pageSize,function(response){},function(response){
					// console.log(response)
					if(response.data.code === 0){
						this.formateDate(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
						this.$message({
							type:'success',
							message:this.$t('message.refreshSuccess')
						})
					}else{
						this.$message.error(response.data.msg);
					}
				})
			},
			getDatas(){
				HttpServer.httpGet.call(this,'/Api/Book/Info/NewBook?index='+this.currentPage+'&pageSize='+this.pageSize,function(response){},function(response){
					// console.log(response)
					if(response.data.code === 0){
						this.formateDate(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.totalcount;
					}else{
						this.$message.error(response.data.msg);
					}
				})
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.main {
		background-color: #fff;
		border-radius: 10px;
	}
	.flex-inline{
		display: flex;
		justify-content: space-between;
	}
	.query {
		display: flex;
		float: right;
	}
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>